<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition template="/WEB-INF/templates/template.xhtml">     
        <style type="text/css">
            .ui-datepicker{ font-size: 9pt;} .ui-button{font-size: 12pt;}
            .ui-tabs{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} 
            .ui-toolbar-group-left{font-size: 12px} 
            .ui-datatable .ui-datatable-header {
                        text-align: left;
                    }
        </style>
        <ui:define name="toolbar">
            <h:form id="formToolbarConsultarCliente" >
                    <ui:include src="/WEB-INF/templates/toolbarCliente.xhtml"/>
            </h:form>   
        </ui:define>          
        <ui:define id="defineBodyConsultarClientes" name="body">
            <p:panel id="panelConsultarClientes"  style="font-size: 12px; border-width: 0px">   
                <h:form id="formBuscarCliente" style="width: 250px;  ">
                    <p:growl id="messagesConsulta"/>
                    <p:fieldset id="fieldsetBuscarCliente"   toggleable="false" legend="Buscar Cliente" style="font-size: 12px; width: 250px;left: 13px;top: 14px;position: absolute" >  
                        <h:panelGrid columns="1" cellpadding="2"  style="font-size: 12px;margin-right: 8px;text-align: right; vertical-align: middle" >             
                            <p:inputText binding="#{clienteWeb.textBuscarCliente}" id="textBuscarCliente" style="font-size: 12px" size="30" />
                            <h:outputText value="por"  style="font-size: 12px" />
                            <h:selectOneMenu binding="#{clienteWeb.comboBuscarCliente}"  id="comboBuscarCliente"  style="font-size: 12px;height: 25px;alignment-baseline: middle; ">
                                <f:selectItem itemLabel="Todo..." itemValue="Todo"  />
                                <f:selectItem itemLabel="Numero de Cliente" itemValue="NumeroCliente" />
                                <f:selectItem itemLabel="Cedula (Persona)" itemValue="NumeroCedula" />
                                <f:selectItem itemLabel="RUC (Empresa)" itemValue="RUC" />               
                                <f:selectItem itemLabel="Nombre de Cliente (Persona)" itemValue="NombreCliente" />
                                <f:selectItem itemLabel="Razón Social (Empresa)" itemValue="NombreEmpresa" />
                                <f:selectItem itemLabel="Dirección" itemValue="Direccion" />
                                <f:selectItem itemLabel="Prioridad del Cliente" itemValue="PrioridadCliente" />
                            </h:selectOneMenu>
                            <h:outputText value="coincidencia de búsqueda"  style="font-size: 12px" />
                            <h:selectOneMenu binding="#{clienteWeb.comboCoincidenciaBusquedaCliente}"  id="comboCoincidenciaBusquedaCliente"  style="font-size: 12px;height: 25px;alignment-baseline: middle; ">
                                <f:selectItem itemLabel="Todas las Coincidencias" itemValue="todas"  />
                                <f:selectItem itemLabel="Coincidencia Exacta" itemValue="exacta" />
                                <f:selectItem itemLabel="Coincidencia Inicial" itemValue="inicial" />
                                <f:selectItem itemLabel="Coincidencia Final" itemValue="final" />                               
                            </h:selectOneMenu>
                            <p:commandButton ajax="false" id="botonBuscarCliente" value="Consultar" icon="ui-icon-search" type="submit" actionListener="#{clienteWeb.clicBotonBuscarCliente()}" style="font-size: 12px; width: 100px; " />                           
                        </h:panelGrid>  
                    </p:fieldset> 
                </h:form> 
                <p:tabView id="tabPersonaEmpresa" orientation="top" style="left:300px; top: 28px;position: absolute; width: 75%" >
                    <p:ajax  event="tabChange" listener="#{clienteWeb.eventoTabSeleccionadoPersonaEmpresa}" process="@this" />
                    <p:tab id="tabPersona" title="Clientes: Personas (#{clienteWeb.tablaDatosPersona.size()} coincidencias)"  titleStyle="font-size: 12px;"   >
                            <h:panelGrid columns="1" cellpadding="1" >
                                <h:form id="formTablaConsultarClientePersona" >
                                    <p:dataTable  id="tablaConsultarClientePersona" var="consultarClientePersona" value="#{clienteWeb.tablaDatosPersona}" widgetVar="tablaConsultarClientePersona" 
                                                emptyMessage="Búsqueda finalizada, no existe cliente con los criterios de búsqueda ingresados" resizableColumns="false" paginator="true" rows="10"  
                                                rowsPerPageTemplate="5,10,20,100" selectionMode="single" selection="#{clienteWeb.clientePersonaSeleccionado}" rowKey="#{consultarClientePersona.numerocliente}">                                                                                      
                                        <p:ajax event="rowSelect"  listener="#{clienteWeb.eventoFilaSeleccionadaTablaPersonaEmpresa('Persona')}" process="@this"  update=":formDialogoEliminarCliente" />  
                                        <p:column id="columnaNumeroClientePersona" sortBy="#{consultarClientePersona.numerocliente}" filterBy="#{consultarClientePersona.numerocliente}" headerText="Cliente Numero"  style="width:125px">
                                               <h:outputText value="#{consultarClientePersona.numerocliente}"  />
                                           </p:column>
                                           <p:column id="conlumnaNumeroCedulaPersona" sortBy="#{consultarClientePersona.numerocedula}" filterBy="#{consultarClientePersona.numerocedula}" headerText="Cedula"  style="width:103px">
                                               <h:outputText value="#{consultarClientePersona.numerocedula}"  />
                                           </p:column>
                                           <p:column id="conlumnaNombreClientePersona" sortBy="#{consultarClientePersona.nombrecliente}" filterBy="#{consultarClientePersona.nombrecliente}" headerText="Nombres"  style="width:411px" filterMatchMode="contains"  >
                                                <h:outputText value="#{consultarClientePersona.nombrecliente}" />
                                            </p:column>

                                            <p:column id="columnaFechaIngresoPersona" sortBy="#{consultarClientePersona.fechaingreso}" filterBy="#{consultarClientePersona.fechaingreso}" headerText="Fecha de Ingreso"  style="width:133px" filterMatchMode="contains" >
                                                <h:outputText value="#{consultarClientePersona.fechaingreso}" />
                                            </p:column>

                                            <p:column id="columnaPrioridadClientePersona" sortBy="#{consultarClientePersona.prioridadcliente}" filterBy="#{consultarClientePersona.prioridadcliente}" headerText="Prioridad"  style="width:220px"  >
                                                <h:outputText value="#{consultarClientePersona.prioridadcliente}/10" />
                                            </p:column>
                                            <f:facet  name="footer" >
                                                <p:commandButton  id="botonMostrarDatosClientePersona" type="push" value="Mostrar Datos" icon="ui-icon-search" actionListener="#{clienteWeb.mostrarDatosTablaDialogo('Persona')}"   update=":formDialogoCliente" oncomplete="dialogoConsultaCliente.show()" />
                                            </f:facet>
                                       </p:dataTable>                                
                                </h:form>   
                            </h:panelGrid>
                        </p:tab>
                        <p:tab id="tabEmpresa" title="Clientes: Empresas (#{clienteWeb.tablaDatosEmpresa.size()} coincidencias)" titleStyle="font-size: 12px;">
                            <h:panelGrid columns="1" cellpadding="1">
                                <h:form id="formTablaConsultarClienteEmpresa">
                                    <p:dataTable id="tablaConsultarClienteEmpresa" var="consultarClienteEmpresa" value="#{clienteWeb.tablaDatosEmpresa}" widgetVar="tablaConsultarClienteEmpresa" 
                                                emptyMessage="Búsqueda finalizada, no existe cliente con los criterios de búsqueda ingresados" resizableColumns="false" paginator="true" rows="10"  
                                                rowsPerPageTemplate="5,10,20,100" selectionMode="single" selection="#{clienteWeb.clienteEmpresaSeleccionado}" rowKey="#{consultarClienteEmpresa.numerocliente}">                                        
                                        <p:ajax event="rowSelect"  listener="#{clienteWeb.eventoFilaSeleccionadaTablaPersonaEmpresa('Empresa')}" process="@this" update=":formDialogoEliminarCliente" /> 
                                        <p:column id="columnaNumeroClienteEmpresa" sortBy="#{consultarClienteEmpresa.numerocliente}" filterBy="#{consultarClienteEmpresa.numerocliente}" headerText="Cliente Numero"  style="width:125px">
                                            <h:outputText value="#{consultarClienteEmpresa.numerocliente}"  />
                                        </p:column>
                                        <p:column id="conlumnaRUCEmpresa" sortBy="#{consultarClienteEmpresa.ruc}" filterBy="#{consultarClienteEmpresa.ruc}" headerText="RUC" style="width:121px">
                                            <h:outputText value="#{consultarClienteEmpresa.ruc}" />
                                        </p:column>
                                        <p:column id="conlumnaNombreClienteEmpresa" sortBy="#{consultarClienteEmpresa.nombreempresa}" filterBy="#{consultarClienteEmpresa.nombreempresa}" headerText="Razón Social" style="width:299px">
                                            <h:outputText value="#{consultarClienteEmpresa.nombreempresa}" />
                                        </p:column>
                                        <p:column id="conlumnaRepresentanteClienteEmpresa" sortBy="#{consultarClienteEmpresa.representante}" filterBy="#{consultarClienteEmpresa.representante}" headerText="Representante" style="width:271px">
                                            <h:outputText value="#{consultarClienteEmpresa.representante}" />
                                        </p:column>
                                        <p:column id="columnaFechaIngresoEmpresa" sortBy="#{consultarClienteEmpresa.fechaingreso}" filterBy="#{consultarClienteEmpresa.fechaingreso}" headerText="Fecha de Ingreso" style="width:121px" >
                                            <h:outputText value="#{consultarClienteEmpresa.fechaingreso}" />
                                        </p:column>

                                        <p:column id="columnaPrioridadClienteEmpresa" sortBy="#{consultarClienteEmpresa.prioridadcliente}" filterBy="#{consultarClienteEmpresa.prioridadcliente}" headerText="Prioridad" style="width:73px" >
                                            <h:outputText value="#{consultarClienteEmpresa.prioridadcliente}/10" />
                                        </p:column>
                                        <f:facet name="footer">
                                            <p:commandButton id="botonMostrarDatosClienteEmpresa" type="push" value="Mostrar Datos" icon="ui-icon-search"  actionListener="#{clienteWeb.mostrarDatosTablaDialogo('Empresa')}" update=":formDialogoCliente" oncomplete="dialogoConsultaCliente.show()" />
                                        </f:facet>
                                    </p:dataTable>
                                </h:form>                              
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>
                          
                </p:panel>
            
            </ui:define>
            <ui:define name="dialogos" >
            <!--Dialogo para ver toda la informacion relacionada con el cliente -->                
            <h:form id="formDialogoCliente">
                <p:dialog header="#{clienteWeb.nombreDialogo}" widgetVar="dialogoConsultaCliente" resizable="false"  
                           modal="true" style="font-size: 12px"> 
                    <h:panelGrid columns="2" cellpadding="0" style="alignment-adjust: middle">                             
                            <p:dataTable var="datosSeleccionado"  value="#{clienteWeb.datosSeleccionado}" >         
                                <p:column style="text-align: right; font-weight: bold" footerText="">                                    
                                    <h:outputText value="#{datosSeleccionado.substring(0, 21)}" style="font-size: 12px"/>                                 
                                </p:column>  
                                <p:column footerText=""  >                                    
                                    <h:outputText value="#{datosSeleccionado.substring(21)}" style="font-size: 12px" />                                 
                                </p:column>                                                                    
                            </p:dataTable>   
                    </h:panelGrid>    
                    <p:separator/>
                    <p:commandButton value="Cerrar" type="button" onclick="dialogoConsultaCliente.hide()" />
                </p:dialog>
            </h:form>      
            <!--Eliminacion Cliente -->    
            <h:form id="formDialogoEliminarCliente"> 
                <ui:include  src="/formularios/gestionClientes/eliminarCliente.xhtml"/>                      
            </h:form>                   
            </ui:define>
        </ui:composition>
    </body>
</html>